<template>
  <div class="dialog">
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :width="dialogWidth"
      :close-on-click-modal="false"
      @closed="closed"
    >
      <template #title>
        <span>{{title}}</span>
        <el-divider class="title_divider"/>
      </template>
      <!--对话框主体部分插槽-->
<!--      <div style="height:70vh;overflow: auto;">-->
      <div style="overflow: auto;">
        <slot name="dialog_body" >
        </slot>
      </div>
      <template #footer v-if="showDialogFoot">
          <span class="dialog-footer">
            <el-divider class="foot_divider"/>
            <el-button v-show="showCancelButton" @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" :loading="loadingButton" @click="$emit('dialogSubmit')">{{ buttonText }}</el-button>
            <slot name="foot_right">
            </slot>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
/**
 * 对话框公共组件，用于统一对话框的样式。
 * 本主键不对对话框的主体部分进行处理
 */
import {
  defineExpose, defineProps, ref, withDefaults, computed, getCurrentInstance, isRef, unref, inject, reactive,
} from 'vue';
import { TableColumn, FormHeader } from '@/types/interface/base_interface';
import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';
import * as Icons from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
// 接收父组件的值
interface Props {
  dialogWidth?:string, // 对话框宽度
  dialogBodyHeight?:string, // 对话框主体高度
  title?:string, // 对话框标题,前台传入，不用加入添加或编辑的文本。添加或编辑的文本由action属性决定
  showCancelButton?:boolean, // 是否显示取消按钮
  buttonText?:string, // 确认按钮上的文字
  showDialogFoot?:boolean, // 是否显示对话框脚部
}
const props = withDefaults(defineProps<Props>(), {
  title: '表单',
  dialogWidth: '500px',
  showCancelButton: true,
  buttonText: '保存',
  showDialogFoot: true,
  dialogBodyHeight: '70vh',
});

// 状态变量
const dialogVisible = ref(false); // 对话框状态栏，true表示对话框可见
let loadingButton = ref(false); // 按钮加载状态，表示在加载中
// 打开此对话框的函数
const openDialog = () => {
  dialogVisible.value = true;
};
// 关闭此对话框的函数
const closeDialog = () => {
  dialogVisible.value = false;
};
// 关闭对话框时候
const closed = () => {
  // 关闭对话框后还要处理的信息交给父组件
  proxy.$emit('closed');
};

defineExpose({ // 参考vue3官方文档，需要将函数暴露出去才能被父组件调用，setup模式是不暴露的
  openDialog,
  closeDialog,
});
</script>

<style lang="scss" scoped>
.dialog{
  ::v-deep .el-dialog__body{ /*修改el-dialog对话框的body样式*/
    padding: 10px 15px; /*element中dialog组件的body默认样式是padding：30px 20px;*/
  }
  .title_divider{
    margin:20px 0 5px 0;
  }
  .foot_divider{
    margin:0 0 20px 0;
  }
}
</style>
